<template>
  <div class="pt-2 pl-2 pr-3">
    <div class="text-xs pb-2">热门搜索</div>
    <div v-for="(item, index) in listState.hotList" :key="index">
      <div class="pt-1 pb-1 flex items-center justify-between" @click="changeHotKeyWord(item.first)">
        <span class="icon-hover">{{ index + 1 }} {{ item.first }}</span>
        <div class="flex cursor-pointer items-center text-rose-500">
          <IconPark class="hover:animate-ping" v-show="[0, 1, 2].includes(index)" :icon="Fire" />
          <!-- <span>{{ item.score }}</span> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { toRefs } from 'vue'
import { useSearchStore } from '@/stores/search'
import IconPark from '../icon-park/IconPark.vue'
import { Fire } from '@icon-park/vue-next'

const { listState, changeHotKeyWord } = toRefs(useSearchStore())
</script>

<style lang="less" scoped></style>
